<template>
  <div id="merchant">
    <el-row>
      <el-col>
        <el-affix>
          <RouterGuide subtitle="渔场查询"></RouterGuide>
        </el-affix>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18">
        <el-row>
          <el-tabs v-model="freshChosen" style="width: 100%">
            <el-tab-pane label="当季热门" name="hot" class="tab_pane"></el-tab-pane>
            <el-tab-pane label="虾类" name="shrimp" class="tab_pane"></el-tab-pane>
            <el-tab-pane label="蟹类" name="crab" class="tab_pane"></el-tab-pane>
            <el-tab-pane label="淡水鱼类" name="freshWaterFish" class="tab_pane"></el-tab-pane>
            <el-tab-pane label="海水鱼类" name="saltWaterFish" class="tab_pane"></el-tab-pane>
            <el-tab-pane label="贝类" name="shell" class="tab_pane"></el-tab-pane>
            <el-tab-pane label="龟鳖类" name="turtle" class="tab_pane"></el-tab-pane>
            <el-tab-pane label="其他类" name="other" class="tab_pane"></el-tab-pane>
          </el-tabs>
        </el-row>
        <el-row v-if="freshChosen === 'shrimp'">
          <ShrimpGuide style="width: 100%"></ShrimpGuide>
        </el-row>
        <el-row>
          <Fisheries :merchant-list="merchantList"></Fisheries>
        </el-row>
      </el-col>
      <el-col :span="5" :offset="1">
        <el-row>
          <ShrimpPriceTrend style="width: 100%"></ShrimpPriceTrend>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import RouterGuide from "@/components/Public/RouterGuide";
import Merchant from "@/pojo/Merchant";
import {Fresh} from "@/pojo/Fresh";
import Fisheries from "@/components/Merchants/Fisheries";
import ShrimpGuide from "@/components/Merchants/ShrimpGuide";
import ShrimpPriceTrend from "@/components/Merchants/ShrimpPriceTrend";

export default {
  name: "Merchants",
  components: {ShrimpPriceTrend, ShrimpGuide, Fisheries, RouterGuide},
  data() {
    return {
      merchantList: [
        new Merchant()
            .setIcon(require("@/assets/popularMerchant/merchant1.png"))
            .setName("通州湾海洋经济产业园工厂化养殖基地")
            .setFreshList([
              new Fresh()
                  .setName("南美白对虾")
                  .setIcon(require("@/assets/MerchantFresh/merchant1fresh1.jpg"))
                  .setPrice(30)
                  .setDescription("介绍"),
              new Fresh()
                  .setName("斑节对虾")
                  .setIcon(require("@/assets/MerchantFresh/merchant1fresh2.jpg"))
                  .setPrice(14)
            ])
            .setPosition("上海")
            .setScore(60),
        new Merchant()
            .setIcon(require("@/assets/popularMerchant/merchant2.png"))
            .setName("B公司")
            .setFreshList([
              new Fresh()
                  .setIcon(require("@/assets/MerchantFresh/merchant2fresh1.jpg"))
                  .setName("中国对虾")
                  .setPrice(30)
            ])
            .setPosition("杭州")
            .setScore(20)
      ],
      freshChosen: "shrimp"
    }
  },
  methods: {}
}
</script>

<style scoped>
.tab_pane {
  width: 12%;
}
</style>